<template>
    <div class="mass-select">
        <span v-if="multiple" @click="open($event)" class="mass-tag-group">
            <span v-show="results.length>0" class="mass-tag">
                <span class="mass-tag-text" v-text="tagText"></span>
                <span class="mass-tag-close">
                    <div @click.stop="deleteItem" class="tag-vi-close">
                        <div class="tag-vi-icon-close"></div>
                    </div>
                </span>
            </span>
            <span v-show="results.length>1" class="mass-tag-more">
                <span class="mass-tag-text">+{{tagMoreText}}</span>
            </span>
            <input class="tag-input" :placeholder="placeholder" v-model="multipleInput" type="text">
        </span>
        <input class="mass_input" v-model="inn" :placeholder="placeholder" :class="{'has-focuse':focuse}" type="text"  @click="open($event)">
        <div ref="selectIcon" @click="open($event)" class="select-icon">
            <div v-show="clearIconShow" @click.stop="clearResult" class="vi-close">
                <div class="vi-icon-close"></div>
            </div>
            <div v-show="!clearIconShow" :class="['vi-arrow',{'has-show':dropdown}]">
                <div class="vi-arrow-down"></div>
            </div>
        </div>
        <div :class="['drop-div',{'has-show':dropdown}]">
            <div :style="{height:height}" class="drop-select">
                <vi-list class="virtualList" ref="virtualList" :height="height" :data="showData">
                    <template v-slot="{item}">
                        <div @click="clickItem(item)" :class="['item-select',{'has-check':item.check}]">{{item[label]}}</div>
                    </template>
                </vi-list>
            </div>
            <div class="drop-corner"></div>
            <div class="drop-corner-bottom"></div>
        </div>
    </div>
</template>
<script>
//使用多选 <mass-select :data="array" :multiple="true" v-model:results="value"></mass-select>
//单选  <mass-select :data="array" v-model:result="value"></mass-select>
import viList from '../../list/src/vi-list'

export default {
    components: { viList },
    name:'vi-select',
    props:{
        //单选绑这个
        result:{
            require:true
        },
        //多选绑这个
        results:{
            type:Array,
            require:true
        },
        //下拉数据 
        data:{
            type:Array,
            require:true,
        },
        //选项的值
        value:{
            type:String,
            default:'value'
        },
        //选项的标签
        label:{
            type:String,
            default:'label'
        },
        //是否多选
        multiple:{
            type:Boolean,
            default:false
        },
        //自定义搜索方法
        filterMethod:{
            type:Function,
            default:function(val,item){
                // eslint-disable-next-line vue/no-deprecated-props-default-this
                if(!item[this.label]){
                    return false
                }
                // eslint-disable-next-line vue/no-deprecated-props-default-this
                return item[this.label].indexOf(val)!=-1
            }
        }
    },
    data() {
        return {
            showData:[],
            showDataMap:null,
            showDataCopy:[],
            focuse:false,
            dropdown:false,
            height:200,
            clearIconShow:false,

            inn:null,
            innCopy:null,
            placeholder:'请选择',

            tagText:null,
            tagMoreText:null,
            multipleInput:''
        }
    },
    watch:{
        data:{
            deep:true,
            handler(){
                this.initShowData()
                this.initInn()
            }
        },
        results:{
            deep:true,
            handler(){
                this.initInn()
            }
        },
        result(){
            this.initInn()
        },
        inn(val){
            if(this.dropdown){
                if(val&&val.length>0){
                    this.showData=[]
                    this.showData=this.showDataCopy.filter(item=>{return this.filterMethod(val,item)})
                }else{
                    this.showData=JSON.parse(JSON.stringify(this.showDataCopy))
                }
                let topHeight=this.$refs.virtualList.$refs.listWrap.scrollTop
                if(topHeight>this.showData.length*26-this.height){
                    this.$refs.virtualList.initWrapAndScroll()
                }else{
                    this.$refs.virtualList.initWrap()
                }
            }
        },
        multipleInput(val){
            if(val&&val.length>0){
                this.showData=[]
                this.showData=this.showDataCopy.filter(item=>{return this.filterMethod(val,item)})
            }else{
                this.showData=JSON.parse(JSON.stringify(this.showDataCopy))
            }
            this.$refs.virtualList.initWrapAndScroll()
        }
    },
    created(){
        this.initShowData()
        this.initInn()
        window.addEventListener('click',this.init)
        window.addEventListener('mouseover',this.initIcon)
    },
    unmounted(){
        window.removeEventListener('click',this.init)
        window.removeEventListener('mouseover',this.initIcon)
    },
    methods:{
        initShowData(){
            this.showDataCopy=JSON.parse(JSON.stringify(this.data))
            if(!this.multiple){
                this.showData=JSON.parse(JSON.stringify(this.data))
            }
            if(this.showDataCopy.length==0){
                this.height=30
            }else{
                this.height=this.showDataCopy.length>7?200:this.showDataCopy.length*26+5
            }
            this.$nextTick(()=>{
                this.$refs.virtualList.initWrap()
                this.$refs.virtualList.crearScroll()
            })
        },

        initInn(){
            if(this.multiple){
                if(this.results&&this.results.length>0){
                    this.placeholder=""
                    this.tagMoreText=this.results.length-1
                }else{
                    this.placeholder="请选择"
                }
                for(let l=this.showDataCopy.length-1;l>=0;l--){
                    this.showDataCopy[l].check=false
                    if(this.results.findIndex(e=>{return e==this.showDataCopy[l][this.value]})!=-1){
                        this.showDataCopy[l].check=true
                        if(this.results[0]==this.showDataCopy[l][this.value]){
                            this.tagText=this.showDataCopy[l][this.label]
                        }
                    }
                }
                this.showData=JSON.parse(JSON.stringify(this.showDataCopy))
            }else{
                this.inn=this.result
                this.placeholder="请选择"
                for(let l=this.showDataCopy.length-1;l>=0;l--){
                    this.showDataCopy[l].check=false
                    if(this.showDataCopy[l][this.value]==this.result){
                        this.inn=this.showDataCopy[l][this.label]
                        this.showDataCopy[l].check=true
                    }
                }
            }
        },

        init(e){
            if(this.dropdown&&!this.$el.contains(e.target)){
                this.dropdown=false
                this.focuse=false
                setTimeout(() => {
                    //关闭2
                    this.inn=this.result
                    this.multipleInput=''
                    if(!this.multiple||this.results.length==0){
                        this.placeholder="请选择"
                    }
                    for(let l=this.showDataCopy.length-1;l>=0;l--){
                        if(this.showDataCopy[l][this.value]==this.result){
                            this.inn=this.showDataCopy[l][this.label]
                        }
                    }
                }, 300);
            }
        },

        initIcon(e){
            if(!this.multiple&&this.inn){
                this.clearIconShow=this.$refs.selectIcon.contains(e.target)
            }
            if(this.multiple&&this.results&&this.results.length>0){
                this.clearIconShow=this.$refs.selectIcon.contains(e.target)
            }   
        },

        clearResult(){
            if(this.multiple){
                this.$emit('update:results',[])
            }else{
                this.$emit('update:result',"")
            }
            this.clearIconShow=false
        },

        open(e){
            this.focuse=!this.focuse
            this.dropdown=this.focuse
            if(!this.focuse){
                e.target.blur()
                setTimeout(() => {
                    //关闭1
                    this.inn=this.result
                    this.multipleInput=''
                    if(!this.multiple||this.results.length==0){
                        this.placeholder="请选择"
                    }
                    for(let l=this.showDataCopy.length-1;l>=0;l--){
                        if(this.showDataCopy[l][this.value]==this.result){
                            this.inn=this.showDataCopy[l][this.label]
                        }
                    }
                }, 300);
            }else{
                //打开
                this.placeholder=this.inn
                this.inn=null
            }
        },

        deleteItem(){
            // eslint-disable-next-line vue/no-mutating-props
            this.results.splice(0,1)
        },

        clickItem(val){
            this.dropdown=false
            this.focuse=false
            if(this.multiple){
                if(val.check){
                    for(let l=this.results.length-1;l>=0;l--){
                        if(this.results[l]==val[this.value]){
                            // eslint-disable-next-line vue/no-mutating-props
                            this.results.splice(l,1)
                        }
                    }
                }else{
                    // eslint-disable-next-line vue/no-mutating-props
                    this.results.push(val[this.value])
                }
                val.check=!val.check
            }else{
                this.$emit('update:result',val[this.value])
            }
        }
    }
}
</script>
<style>
    /* /deep/ .virtualList .list-wrap{
        border: none;
    } */
    .mass-tag-text{
        width:fit-content;
        font-size: 12px;
        position: relative;
        top: 0px;
        padding: 0 8px;
        vertical-align: 0px;
        /* // max-width: 60px; */
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .mass-tag-close{
        color: white;
        background: #C0C4CC;
        display: inline-block;
        position: relative;
        top: 3px;
        margin-right: 2px;
        border-radius: 50%;
        height: 12px;
        font-size: 5px;
        line-height: 12px;
        width: 12px;
        vertical-align: 3px;
        padding-left: 0.5px;
    }
    .select-icon{
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        right: 1px;
    }
    .vi-arrow{
        width: 1rem;
        height: 1rem;
        position: relative;
        top: .5rem;
        left: .25rem;
        transition: all 0.3s;
    }
    .vi-arrow.has-show{
        transform: rotate(-180deg);
    }
    .vi-arrow-down{
        position: absolute;
        top: 0px;
        left: 3px;
        width: .5rem;
        height: .5rem;
        border-top: 2px solid #e6e6e6;
        border-right: 2px solid #e6e6e6;
        transform:  rotate(135deg)
    }
    .tag-vi-icon-close {
        position: absolute;
        top: 5px;
        width: 8px;
        height: 2px;
        background: #999;
        line-height: 0;
        font-size: 0;
        vertical-align: middle;
        transform: rotate(45deg);
    }
    .tag-vi-icon-close:after {
        content: "/";
        display: block;
        width: 8px;
        height: 2px;
        background: #999;
        transform: rotate(-90deg);
    }
    .tag-vi-close{
        width: 12px;
        height: 12px;
        position: relative;
        top: 0rem;
        left: 1.5px;
    }
    .vi-close{
        width: 12px;
        height: 12px;
        position: relative;
        top: .5rem;
        left: .25rem;
    }
    .vi-icon-close {
        position: absolute;
        top: 5px;
        width: 12px;
        height: 2px;
        background: #999;
        line-height: 0;
        font-size: 0;
        vertical-align: middle;
        transform: rotate(45deg);
    }
    .vi-icon-close:after {
        content: "/";
        display: block;
        width: 12px;
        height: 2px;
        background: #999;
        transform: rotate(-90deg);
    }
    .mass-tag{
        background:#f4f4f5;
        position: relative;
        display: inline-block;
        margin-left: 3px;
        display: flex;
        top: 5px;
        border-radius: 4px;
        z-index: 1;
        height: 18px;
        color: #909399;
        width: fit-content;
        border: 1px solid #e9e9eb;
        max-width: 90px;
    }
    .mass-tag:hover{
        cursor: auto;
    }
    .mass-tag-close:hover{
        background: #909399;
        color: #FFF;
        cursor: pointer;
    }
    .tag-input{
        /* // display: flex; */
        width: 100%;
        position: relative;
        height: 18px;
        top: 5px;
        left: 4px;
        z-index: 1;
        cursor:pointer;
        border: none;
        border-color: #FFF;
        box-sizing: border-box;
    }
    .tag-input:focus{
        outline: none;
    }
    .mass-tag-group{
        width: 165px;
        height: 0px;
        display: flex;
        padding-left: 3px;
        z-index: 1;
    }
    .mass-tag-more{
        background:#f4f4f5;
        position: relative;
        margin-left: 6px;
        vertical-align: 2px;
        display: flex;
        top: 5px;
        border-radius: 4px;
        z-index: 1;
        height: 18px;
        color: #909399;
        width: fit-content;
        border: 1px solid #e9e9eb;
    }
    .mass-tag-more:hover{
        cursor: auto;
    }
    .item-select{
        white-space: nowrap;
        padding-left: 10px;
    }
    .item-select.has-check{
        color: #409EFF;
        font-weight: 700;
    }
    .item-select:hover{
        background-color: #F5F7FA;
    }
    .drop-select{
        position: absolute;
        border-radius: 8px;
        box-shadow: 0 0 3px 0px rgba(94, 119, 177, 0.411);
        top: 40px;
        width: 100%;
        background: white;
        z-index: 9;
    }
    .drop-div{
        visibility: hidden;
    }
    .drop-div.has-show{
        visibility: visible;
    }
    .virtualList{
        z-index: 10;
    }
    .drop-corner{
        z-index: 5;
        position: absolute;
        top: 36px;
        left: 90px;
        width: 10px;
        height: 10px;
        box-shadow: 0 0 4px 0px rgba(94, 119, 177, 0.411);
        transform: rotate(45deg);
    }
    .drop-corner-bottom{
        z-index: 15;
        top: 35px;
        left: 89px;
        position: absolute;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
    }
    /* .select_icon{
        background: green;
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        top: 0px;
        right: 1px;
        text-align: center;
        line-height: 30px;
        color: #909399;
        transition: all 0.3s;
    } */
    .mass-select{
        width: 200px;
        height: 30px;
        display: block;
        position: relative;
        cursor: pointer;
        /* // z-index: 10; */
    }
    .mass_input{
        left: 0px;
        position: absolute;
        display: inline-block;
        top: 0px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #DCDFE6;
        font-size: 14px;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 25px;
        cursor:pointer;
        outline: 0;
        color: #606266;
    }
    .mass_input.has-focuse{
        border-color: #409EFF;
    }
    input::input-placeholder{
        color: #C0C4CC;
        font-size: 12px;
    }
    input::-webkit-input-placeholder{
        color: #C0C4CC;
        font-size: 12px;
    }
    input::-ms-input-placeholder{
        color: #C0C4CC;
        font-size: 12px;
    }
    input::-moz-input-placeholder{
        color: #C0C4CC;
        font-size: 12px;
    }
</style>
